<!-- 2023年十月巅峰赛「活动简介」弹窗 -->
<!-- 已改为使用Introduction组件，本文件可考虑删除 -->
<template>
  <!-- 提示弹窗 -->
  <uni-popup
    ref="popup"
    :mask-click="false"
  >
    <div class="container">
      <image
        class="container-bg"
        :src="IMG_URL.POPUP_BG"
      />
      <image
        class="title"
        :src="IMG_URL.ACTIVITY_INTRODUCTION"
        mode="aspectFit"
      />
      <div class="content">
        <p class="content-p">
          1.本届嗨喵巅峰赛奖品一览：苹果15Pro，万元现金红包等豪礼，等您来拿！
        </p>
        <image
          class="content-img"
          :src="IMG_URL.ACTIVITY_INTRODUCTION_IMG"
          mode="aspectFit"
        />
        <p class="content-p">
          2.活动说明：本活动包含“个人巅峰赛”和“团队邀请赛”两个板块，活动期间，用户可以通过完成特定的活动任务，参与“个人巅峰赛”和“团队邀请赛”两个板块的相应活动赢取相应的活动奖励，两个比赛可同时参加，互不干扰。具体可于
          <span
            class="red"
            @click="emit('clickRule')"
          >活动规则</span>查看
        </p>
        <p class="content-p">
          3.本次个人巅峰赛活动时间：9月28日18点-10月7日24点，团队邀请赛活动时间：9月28日18点-10月31日24点，请知悉。
        </p>
      </div>
      <div
        class="i-know"
        @click="close"
      >
        我知道了
      </div>
    </div>
  </uni-popup>
</template>

<script setup lang="ts">
import { IMG_URL } from '@/static/constant/202310-activity-constant';

/** 当前组件实例 */
const currentInstance = getCurrentInstance();

/** 弹窗打开 */
const open = () => {
  console.log('open');
  const popup = currentInstance?.refs.popup as UniHelper.UniPopupInstance;
  if (popup.open) {
    popup.open();
  }
};

/** 弹窗关闭 */
const close = () => {
  const popup = currentInstance?.refs.popup as UniHelper.UniPopupInstance;
  if (popup.close) {
    popup.close();
  }
};

defineExpose({
  open,
  close,
});

const emit = defineEmits<{(event: 'clickRule'): void;
}>();

</script>

<style scoped lang="scss">
.container {
  position: relative;

  width: 92.2667vw;
  overflow: hidden;

  border-radius: 16px;

  padding: 22px 16px 24px;
  display: grid;
  grid-template:
    'title' max-content
    'content' max-content
    'i-know' max-content
    / 1fr;
  row-gap: 15px;

  .container-bg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    width: 100%;
    height: 100%;
  }

  .title{
    grid-area: title;
    margin-bottom: 10px;

    width: 100%;
    height: 21px;
  }

  .content {
    grid-area: content;

    width: 100%;

    display: flex;
    flex-direction: column;
    row-gap: 16px;
    align-items: center;

    .content-img{
      width: 78.1333vw;
      height: 48.5333vw;
    }

    .content-p{
      font-size: 14px;
      color: #6385DF;

      .red{
        color:#FF2459;
        text-decoration-line: underline;
      }
    }
  }

  .i-know{
    grid-area: i-know;
    justify-self: center;

    width: 64vw;
    height: 9.6vw;

    background: linear-gradient(98deg,#ff69b7, #8d70ff 100%);
    border-radius: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    color: #fff;
  }
}
</style>

<!-- 规则内容样式 -->
<style lang="scss">
.rich-h1 {
  font-size: 17px;
  font-weight: bold;
  color: #333;
}

.rich-p,.rich-ol {
  margin-top: 5px;

  padding: 0 0 0 20px;

  font-size: 15px;
  line-height: 28px;
  color: #333;

  .rich-li {
    margin: 5px 0;
  }
}

.rich-table {
  margin-top: 5px;

  border-collapse: collapse;

  border: 1px solid #333;

  font-size: 13px;
  color: #333;

  .rich-tr {
    border: 1px solid #333;

    .rich-td {
      border: 1px solid #333;

      padding: 5px;
    }
  }
}
</style>
